Ext.define('extjs6test.view.main.UserImage',{
    extend: 'Ext.panel.Panel',

    requires: [
        'extjs6test.view.main.UserImageController',
        'extjs6test.view.main.UserImageModel'
    ],

    controller: 'main-userimage',
    viewModel: {
        type: 'main-userimage'
    },
    layout:{
        type:'hbox',
        align:'center'
    },
    alias: 'widget.userimage',
    imagePath:null, //图片地址
    bind:{
        imagePath:'{userImagePath}'
    },
    defaults:{
        margin:'0 1 0 1'
    },
    items: [
        {
            bind: {html: '<h7>{username}</h7>'}
        },
        {
            xtype: 'image',
            alt:'User Image',
            bind: {
                src: '{userImagePath}',
                width: '{userImageWidth}',
                height: '{userImageHeight}'
            },
            style:{
                'border-radius':'20px'
            }
        }
    ],
    initComponent:function () {
        var me =this;
        me.callParent();
        me.fireEvent('onImagePathChange',me.imagePath);
    },
    setImagePath:function (imagePath) {
        var me = this;
        me.imagePath=imagePath;
        me.fireEvent('onImagePathChange',me.imagePath);
    },
    listeners:{
        onImagePathChange:'onImagePathChange'
    }
});
